<template>
  <div>
    <mu-dialog :open="dialog" title="" dialogClass="loginDailog">
      <mu-text-field label="用户名" hintText="请输入用户名" labelFloat  v-model="username"/>
      <br/>
      <mu-text-field label="密码" hintText="请输入密码" type="password" labelFloat v-model="password"/>
      <br/><br/>
      <mu-raised-button v-show="false" label="获取验证码" class="demo-raised-button" secondary @click="getVCode"/>
      <mu-raised-button label="登录" class="demo-raised-button" primary @click="login"/>
    </mu-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialog: false,
        username: '',
        password: ''
      }
    },
    mounted: function () {
      this.open();
    },
    beforeDestroy(){
      //注销监听
      this.close();
    },
    methods: {
      open () {
        this.dialog = true
      },
      close () {
        this.dialog = false
      },
      getVCode(){
      },
      login(){
        let axios = require('axios');
        let phone = this.username;
        let vcode = this.password;
        let that = this;
        axios.post("http://123.207.23.128:3000/users/login",{username:phone,password:vcode}).then(function (result) {
          if(result.data&&result.data.code&&result.data.code==20000){
            that.$router.replace("/main");
          }else {
              alert("登录失败");
          }
            console.log(result);
        }).catch(function (err) {
          console.log(err);
        });
      }
    }
  }
</script>
<style>
  .loginDailog {
    width: 19%;
  }
</style>
